<template>
  <div class="task">
    <div class="left_ta" :style="{ width: lookme_width }">
      <div
        class="task_day_wrapper"
        v-for="(tasks_day, key,day_index) of tasks"
        :key="key"
      >
        <span class="task_date">{{ key }}</span>
        <div
          class="task_single"
          v-for="task of tasks_day"
          :key="task['taskId']"
        >
          <label :for="isEdit == false?task['taskId']+'chose':task['taskId']+'edit'">
            <input
              v-if="!isEdit"
              class="task_chose_bt"
              type="checkbox"
              v-model="task['taskStatus']"
              :disabled="day_index == 0 && !isHistory ? false:true"
              @click.once="checked_change(task)"
              :id="task['taskId']+'chose'"
            />
            <input
              v-if="isEdit"
              class="task_edit_bt"
              type="button"
              @click="editFn(task)"
              :id="task['taskId']+'edit'"
            />
            <font class="task_title">{{ task["taskTitle"] }}</font>
            <font class="task_desri">{{ task["taskContent"] }}</font>
            <font class="task_time_range"
              >{{ task["startTime"].match(/\d+\s/)[0].match(/\d+/)[0]==key.match(/\d+$/)[0]?"":task["startTime"].match(/\d+\s/)[0].match(/\d+/)[0]+"日" }}{{task["startTime"].match(/\s\d+\D+\d+/)[0].match(/\S+/)[0]}}--{{
                key.match(/\d+$/)[0] == task["deadLine"].match(/\d+\s/)[0].match(/\d+/)[0]
                  ? ""
                  : task["deadLine"].match(/\d+\s/)[0].match(/\d+/)[0] + "日"
              }}{{ task["deadLine"].match(/\s\d+\D+\d+/)[0].match(/\S+/)[0] }}</font
            >
          </label>
        </div>
      </div>
    </div>
    <div class="right_ta" :style="{ width: lookta_width }">
      <div
        class="task_day_wrapper"
        v-for="(tasks_day, key) of lover_tasks"
        :key="key"
      >
        <span class="task_date">{{ key }}</span>
        <div
          class="task_single"
          v-for="task of tasks_day"
          :key="task['taskId']"
        >
          <label>
            <input
              class="task_chose_bt"
              type="checkbox"
              v-model="task['taskStatus']"
              :disabled="true"
              @click.once="checked_change(task)"
              :id="task['taskId']+'chose'"
            />
            <font class="task_title">{{ task["taskTitle"] }}</font>
            <font class="task_desri">{{ task["taskContent"] }}</font>
            <font class="task_time_range"
              >{{ task["startTime"].match(/\d+\s/)[0].match(/\d+/)[0]==key.match(/\d+$/)[0]?"":task["startTime"].match(/\d+\s/)[0].match(/\d+/)[0]+"日" }}{{task["startTime"].match(/\s\d+\D+\d+/)[0].match(/\S+/)[0]}}--{{
                key.match(/\d+$/)[0] == task["deadLine"].match(/\d+\s/)[0].match(/\d+/)[0]
                  ? ""
                  : task["deadLine"].match(/\d+\s/)[0].match(/\d+/)[0] + "日"
              }}{{ task["deadLine"].match(/\s\d+\D+\d+/)[0].match(/\S+/)[0] }}</font
            >
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Task",
  props:["null_lover","isEdit"],
  data() {
    return {
      lookme_width: "50%",
      lookta_width: "50%",
      token: "",
      tasks: {},
      lover_tasks:{},
      isHistory:false
    };
  },
  watch: {},
  created() {},
  computed: { },
  methods: {
    Task_edit(){
     //this.$emit("update:isEdit",true)
    },
    editFn(task){
      //console.log(task,this.isEdit)
      this.$emit("editing",task)
    },
    Task_lookme() {
      if (this.lookme_width == "50%") {
        this.lookme_width = "100%";
        this.lookta_width = "0";
      } else if (this.lookme_width == "0" || this.lookme_width == "100%") {
        this.lookme_width = "50%";
        this.lookta_width = "50%";
      }
    },
    Task_lookta() {
      if (this.lookta_width == "50%") {
        this.lookta_width = "100%";
        this.lookme_width = "0";
      } else if (this.lookta_width == "0" || this.lookta_width == "100%") {
        this.lookme_width = "50%";
        this.lookta_width = "50%";
      }
    },
    task_LookHistroy(){
      if(!this.isHistory){
        this.get_task("/get_history_task")
        this.get_lover_task("/get_lover_history_task")
        this.isHistory = true
      }else{
        this.get_task("/get_task")
        this.get_lover_task("/get_lover_task")
        this.isHistory = false
      }
      
    },
    get_task(api_url) {
      var url = this.HOME + api_url;
      let token = localStorage.getItem("token");
      this.$axios({
        method: "post", //指定请求方式
        url: url, //请求接口（相对接口，后面会介绍到）
        data: {
          token: token,
        },
      })
        .then((res) => {
          if (res["data"]["msg"] == "成功") {
            console.log(res["data"]["tasks"]);
            this.tasks = res["data"]["tasks"];
          } else {
            if (localStorage.getItem("token") != null) {
              localStorage.removeItem("token");
            }
            this.$router.push({
              name: "Login",
            });
          }
        })
        .catch(function (err) {
          throw err;
          //请求失败或者接口返回失败或者.then()中的代码发生错误时执行
        });
    },
    get_lover_task(api_url) {
      var url = this.HOME + api_url;
      let token = localStorage.getItem("token");
      this.$axios({
        method: "post", //指定请求方式
        url: url, //请求接口（相对接口，后面会介绍到）
        data: {
          token: token,
        },
      })
        .then((res) => {
          if (res["data"]["msg"] == "成功") {
            //console.log(res["data"]["tasks"]);
            this.lover_tasks = res["data"]["tasks"];
          } else {
            if (localStorage.getItem("token") != null) {
              localStorage.removeItem("token");
            }
            this.$router.push({
              name: "Login",
            });
          }
        })
        .catch(function (err) {
          throw err;
          //请求失败或者接口返回失败或者.then()中的代码发生错误时执行
        });
    },
    checked_change(task) {
      //console.log('check change',task)
      var that = this;
      this.$watch(
        function () {
          return task;
        },
        function (val) {
          //console.log(val["taskId"], oldval["taskStatus"], val["taskStatus"]);
          var url = that.HOME + "/change_task";
          let token = localStorage.getItem("token");
          that.$axios({
            method: "post", //指定请求方式
            url: url, //请求接口（相对接口，后面会介绍到）
            data: {
              token: token,
              id:val["taskId"],
              status:val["taskStatus"]
            },
          }).then((res) => {
            this.$message.success({message:res["data"]["msg"],showClose:true})
            //console.log(res["data"]);
          }).catch(err=>{
            this.$message.warning({message:err,showClose:true})
          });
        },
        {
          deep: true,
        }
      );
    },
    lover_check(){
      let loverId = localStorage.getItem("loverId");
      //console.log(loverId)
      if(loverId == "" || loverId == 'null' ){
        this.Task_lookme()
        this.$emit("update:null_lover",true)
      }else{
        this.get_lover_task("/get_lover_task")
      }
    }
  },
  mounted() {
    this.get_task("/get_task");
    this.lover_check()
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.task {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.left_ta,
.right_ta {
  max-height: 100%;
  overflow-y: scroll;
  transition: width 0.5s;
  -moz-transition: width 0.8s; /* Firefox 4 */
  -webkit-transition: width 0.8s; /* Safari 和 Chrome */
  -o-transition: width 0.8s; /*Opera */
}
.task_day_wrapper {
  text-align: left;
  /* border: 1px solid green; */
  width: 100%;
}
.task_date {
  display: block;
  text-align: center;
  width: 100%;
  border: 1px solid rgba(165, 164, 164, 1);
  border-radius: 30% 30% 5% 5%;
  font-size: 30px;
  color: rgba(8, 9, 10, 0.88);
  background-color: rgba(190, 226, 255, 0.8);
}
.task_single {
  display: block;
  text-align: left;
  width: 100%;
  border: 1px solid rgba(159, 194, 139, 1);
  border-radius: 3%;
  font-size: 21px;
  color: rgba(8, 9, 10, 0.88);
  background-color: rgba(247, 240, 228, 0.8);
}
.task_chose_bt {
  display: inline-block;
  width: 35px;
  height: 35px;
  vertical-align: bottom;
}
.task_edit_bt {
  display: inline-block;
  width: 35px;
  height: 35px;
  border: 0px solid rebeccapurple;
  border-radius: 40%;
  background-color: rgb(175, 173, 139);
  vertical-align: bottom;
}
.task_desri {
  display: block;
  font-size: 15px;
  margin-top: 5px;
  color: rgba(8, 9, 10, 0.68);
}
.task_time_range {
  font-size: 18px;
  display: block;
}
</style>